<!DOCTYPE html>
<html>

<head>
    <title>y86 Simulator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <input type="file" id="input" style="display:none">
    <div id="app"></div>
    <script type="text/template" id="default_y86_code">
.pos 0
Init:
    irmovl Stack, %ebp
    irmovl Stack, %esp
    
.pos 0x100
Stack:
    </script>

    <script type="text/template" id="tmpl_app">
        <div class="header">
            <h1>Y86 Simulator</h1>
            <div class="actions">
                <button class="compile"><i class="fa fa-bolt"></i> Assemble</button>
                <button class="reset"><i class="fa fa-repeat"></i> Reset</button>
                <button class="step"><i class="fa fa-angle-right"></i> Step</button>
                <button class="continue"><i class="fa fa-angle-double-right"></i> <span>Start</span></button>
                <button class="load"><i class="fa fa-file"></i> <span>Load</span></button>
            </div>
            <div class="links">
                <a href="https://github.com/xsznix/js-y86/tree/master/samples">Examples</a>
                <a href="https://github.com/xsznix/js-y86/wiki">Wiki</a>
                <a href="https://github.com/xsznix/js-y86">GitHub <i class="fa fa-github"></i></a>
            </div>
        </div>
        <div class="app-body">
            <div class="editor"></div>
            <div class="inspector"></div>
            <div class="memory"></div>
        </div>
    </script>

    <script type="text/template" id="tmpl_editor">
        <h2>Source code</h2>
        <div class="code"><%= code %></div>
    </script>

    <script type="text/template" id="tmpl_inspector">
        <div class="object"></div>
        <div class="registers-wrapper"></div>
    </script>

    <script type="text/template" id="tmpl_memory">
        <h2>Memory</h2>
        <div class="mem-header">
            <div class="address">Addr</div>
            <div class="value">Value</div>
        </div>
        <div class="mem-words-wrapper">
            <div class="mem-words">
                <div class="stack-pointers">
                    <div class="ebp"><i class="fa fa-caret-left"></i> EBP</div>
                    <div class="esp"><i class="fa fa-caret-left"></i> ESP</div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/template" id="tmpl_object_code">
        <h2>Object code</h2>
        <div class="lines-wrapper">
            <div class="lines"></div>
        </div>
    </script>

    <script type="text/template" id="tmpl_object_code_error">
        <div class="line-no">Line <%= lineno %></div>
        <div class="source"><%= source %></div>
    </script>

    <script type="text/template" id="tmpl_mem_word">
        <div class="address"><%= address %></div>
        <div class="value"><%= value %></div>
    </script>

    <script type="text/template" id="tmpl_registers">
        <div class="column register_column">
            <h3>Registers</h3>
            <div class="register">
                <div class="label">%eax</div>
                <div class="value_hex"><%= eax_hex %></div>
                <div class="value_dec"><%= eax_dec %></div>
            </div>
            <div class="register">
                <div class="label">%ecx</div>
                <div class="value_hex"><%= ecx_hex %></div>
                <div class="value_dec"><%= ecx_dec %></div>
            </div>
            <div class="register">
                <div class="label">%edx</div>
                <div class="value_hex"><%= edx_hex %></div>
                <div class="value_dec"><%= edx_dec %></div>
            </div>
            <div class="register">
                <div class="label">%ebx</div>
                <div class="value_hex"><%= ebx_hex %></div>
                <div class="value_dec"><%= ebx_dec %></div>
            </div>
            <div class="register">
                <div class="label">%esp</div>
                <div class="value_hex"><%= esp_hex %></div>
                <div class="value_dec"><%= esp_dec %></div>
            </div>
            <div class="register">
                <div class="label">%ebp</div>
                <div class="value_hex"><%= ebp_hex %></div>
                <div class="value_dec"><%= ebp_dec %></div>
            </div>
            <div class="register">
                <div class="label">%esi</div>
                <div class="value_hex"><%= esi_hex %></div>
                <div class="value_dec"><%= esi_dec %></div>
            </div>
            <div class="register">
                <div class="label">%edi</div>
                <div class="value_hex"><%= edi_hex %></div>
                <div class="value_dec"><%= edi_dec %></div>
            </div>
        </div>
        <div class="column status_column">
            <h3>Flags</h3>
            <div class="flags">
                <div class="flag">
                    <div class="label">SF</div>
                    <div class="value"><%= sf %></div>
                </div>
                <div class="flag">
                    <div class="label">ZF</div>
                    <div class="value"><%= zf %></div>
                </div>
                <div class="flag">
                    <div class="label">OF</div>
                    <div class="value"><%= of %></div>
                </div>
            </div>
            <h3 class="status_header">Status</h3>
            <div class="status">
                <div class="label">STAT</div>
                <div class="value"><%= stat %></div>
            </div>
            <div class="err">
                <div class="label">ERR</div>
                <div class="value"><%= err %></div>
            </div>
            <div class="pc">
                <div class="label">PC</div>
                <div class="value"><%= pc %></div>
            </div>
        </div>
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

    <script src="js/ace/ace.js"></script>

    <script src="js/y86.js"></script>
    <script src="js/assem.js"></script>
    <script src="js/instr.js"></script>
    <script src="js/general.js"></script>
    <script src="js/syntax.js"></script>

    <script src="js/views/app.js"></script>
    <script src="js/views/editor.js"></script>
    <script src="js/views/inspector.js"></script>
    <script src="js/views/memory.js"></script>
    <script src="js/views/registers.js"></script>
    <script src="js/views/objcode.js"></script>

    <script>
        $(function () {
            var app = new AppView();
            $('#app').append(app.$el);
        });

        // Don't lose unsaved work!
        window.onbeforeunload = function () {
            return 'All unsaved work will be lost!';
        }
    </script>

    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-41144558-1', 'auto');
        ga('send', 'pageview');
    </script>

</body>

</html>